<template>
	<!-- 音频打卡 -->
	<view class="audeo" v-if="audio.catetype == '音频打卡'&& audio.audio_data">
	 <view class="audition">
		 <view class="play_btn" >
			<view class="padding" @tap="audioPlay(audio)">
				<view v-if="!isplay" class="play-icon"><image src="/static/images/post/play_btn.svg" mode=""></image></view>
				<view v-if="isplay" class="play-icon"><image src="/static/images/post/puase_btn.svg" mode=""></image></view>
			</view>
		 </view>
		 <view class="left">
			<view class='content'>
				<slider @change="slider2change" step="1"  min="0" block-size="12" activeColor="#3e89fa"  :value="currentTime2times" :max="audio.audio_data.duration "/>
			</view>
			<view class="time">{{curTime}}/</view>
			<view class="time" v-if="audio.audio_data.duration">{{audio.audio_data.duration | formatDuration}}</view>
		 </view>
		</view>
	</view>
	<!-- 音频打卡 -->
</template>

<script>
	export default {
		props:['audio'],
		data() {
			return {
				// 音频part
				currentTime: 0, //当前音频的播放位置
				duration: 0,//录音时长
				isplay:false,
				innerAudioContext:null,
			}
		},
		onHide() {
			innerAudioContext.destroy()
		},
		mounted() {
			var that = this
			that.innerAudioContext = uni.getBackgroundAudioManager()

			that.innerAudioContext.onTimeUpdate( () => {
				that.currentTime = parseInt(that.innerAudioContext.currentTime)
				console.log(that.currentTime);
				console.log('====');
			})
			that.innerAudioContext.onEnded(() => {
				that.isplay = false
			}) 
			that.innerAudioContext.onPause(()=>{
				that.innerAudioContext.startTime = that.innerAudioContext.currentTime
				that.isplay = false
			})
		},
		methods:{
			audioPlay(item) {//播放--暂停
				let _this = this
						console.log('====xx');
					this.innerAudioContext.src = item.audio_data.voicePath
						this.innerAudioContext.title = '~~~BGM'
					if(!this.isplay){
						this.innerAudioContext.play()
						this.isplay = true
					}else{
						this.innerAudioContext.pause()
					}
					_this.innerAudioContext.onTimeUpdate( () => {
						_this.currentTime = parseInt(_this.innerAudioContext.currentTime)
						console.log(_this.currentTime);
						console.log('====');
					})
			},
			
			slider2change(e) {//拖动录音结束触发
				console.log(e.detail.value);
				var e = e.detail.value
				if(this.isplay){
					this.innerAudioContext.seek(e)
				}else{
					this.currentTime = e
				}
			},
		},
		
		filters:{
			formatDuration(times){//录音时长转化格式
					console.log(times);
					var a = times / 1000
					var b = ""
				  var h = parseInt(a/3600)
				  var m = parseInt(a%3600/60)
				  var s = parseInt(a%3600%60)
				  if(h>0){
				    h = h<10 ? '0'+h : h
				    b += h+":"
				  }
				  m = m<10 ? '0'+m : m 
				  s = s<10 ? '0'+s : s 
				  b+=m+":"+s
				  return b
			}
		},
		computed:{
			currentTime2times() {
				console.log(this.currentTime);
				return this.currentTime * 1000
			},
			curTime:{//当前录音时长转化格式
				set() {},
				get() {
					if(this.currentTime){
						console.log(this.currentTime);
						console.log('lll');
						var curTime = this.currentTime;
						if (curTime < 10) {
									curTime = '00:0' + curTime;
							}
							if (curTime >= 10) {
								if (curTime >= 60) {
									var c = parseInt(curTime / 60)
									var d = curTime % 60
									if (d < 10) {
										d = '0' + d;
									}
									if ( c < 10) {
											c = '0' +  c;
									}
									curTime = c + ':' + d;
								} else {
									curTime = '00:' + curTime;
								}
							} 
						return curTime
					}
					return '00:00';
				}
			},
		},
	}
</script>

<style lang="scss">
	.audeo {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		width: 600rpx;
		margin: 20rpx 0 10rpx 100rpx;
		.audition {
			display: flex;
			align-items: center;
			// justify-content: space-between;
			width: 570rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background-color: rgba(0,0,0,0.2);
			.left {
				display: flex;
				align-items: center;
				.content {
					flex: 1;
					width: 340rpx;
					
				}
				.time {
					font-size: 24rpx;
				}
			}
			
			.play_btn {
				padding-top:4rpx;
				margin-left: 20rpx;
				.play-icon {
					image {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}
		.cancel {
			margin-left: 8rpx;
			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
</style>
